$display-font: 'Press Start 2P'
$body-font: 'Source Code Pro'
$sans-serif-body-font: 'Atkinson Hyperlegible'

$lg-breakpoint: 1024
$md-breakpoint: 900
$sm-breakpoint: 768
$xs-breakpoint: 414

$icon-colors: ("green": #59bf51, "red": #bf413e, "grey":#999999, "purple": #5948a4)

$accent: #5948a4
// Color tokens beginning with "dark-" are used in dark mode.
/* Background colors ---------------------------*/
$header-footer-background: $accent
$navigation-background: #6d5bb9
$navigation-background-highlight: #53429b
$mobile-navigation-background-highlight: #eeecf7
$main-background: #eeeeee
$card-background: #ffffff
$card-footer-background: #f9f9f9
$highlight-background: #cccccc
$chart-highlight-background: #efefef

$dark-header-footer-background: darken($accent, 30%)
$dark-navigation-background: darken($accent, 20%)
$dark-navigation-background-highlight: darken($accent,10%)
$dark-main-background: #222222
$dark-card-background: #333333
$dark-card-footer-background: #292929
$dark-filterbar-background: #333333
$dark-lightbox-background: #444444
$dark-filterbar-border: #555555
$dark-highlight-background: #444444

/* Text colors ---------------------------------*/
// Header and footer
$title-color: #ffffff
$header-footer-body-color: #eeeeee
$header-footer-link-color: lighten($accent, 70%)
$dark-header-footer-body-color: desaturate(lighten($accent, 30%), 40%)
$dark-header-footer-link-color: lighten($accent, 30%)

// Main
$main-text-color: #000000
$main-link-color: $accent
$timestamp-color: #888888

$dark-main-color: #cccccc
$dark-link-color: lighten($accent, 30%)

// Filter
$filterbar-background: #ffffff
$filterbar-border: #cccccc
$filterbar-icon: #333333
$filter-highlight: lighten($accent, 40%)
$filter-text: #000000
$dark-filter-text: $dark-main-color

/* Other colors ---------------------------------*/
$timeline-line-color: #cccccc
$timeline-icon-color: #ffffff
$timeline-highlight-color: $accent
$timeline-highlight-glow-color: lighten($accent, 20%)

$dark-timeline-line-color: #444444
$dark-timeline-icon-color: #cccccc
$dark-timeline-highlight-color: $dark-link-color
$dark-timeline-highlight-glow-color: rgba(255, 255, 255, 0.5)
